<template>
  <div class="root-container">
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="page-title">发布内容</div>

      <!-- 内容发布表单 -->
      <div class="content-form">
        <div class="form-section">
          <div class="section-title">内容详情</div>
          <div class="form-group">
            <label class="form-label">标题 <span class="text-danger">*</span></label>
            <input type="text" class="form-input" v-model="post.title" placeholder="请输入内容标题">
          </div>
          <div class="form-group">
            <label class="form-label">正文内容 <span class="text-danger">*</span></label>
            <el-input type="textarea" :rows="8" v-model="post.content" placeholder="请输入正文内容"></el-input>
          </div>
        </div>

        <div class="form-section">
          <div class="section-title">封面图片</div>

          <div class="form-group">
            <div class="image-upload" @click="handleImageUpload">
              <i class="fa-solid fa-cloud-upload-alt upload-icon"></i>
              <div class="upload-text">点击上传封面图片（建议尺寸：3:4）</div>
            </div>

            <div class="image-preview">
              <div class="preview-item" v-for="(image, index) in post.coverImages" :key="index">
                <img :src="image" alt="预览图" class="preview-image">
                <div class="remove-image" @click="removeCoverImage(index)">
                  <i class="fa-solid fa-times"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-title">发布设置</div>

          <div class="publish-settings">
            <div class="publish-time">
              <label class="form-label">发布时间</label>
              <div class="publish-time-publish ">
                <div>
                  <el-radio-group v-model="publishType">
                    <el-radio-button label="now">立即发布</el-radio-button>
                    <el-radio-button label="schedule">定时发布</el-radio-button>
                  </el-radio-group>
                </div>
                <div>
                  <el-date-picker
                      v-model="post.publishTime"
                      type="datetime"
                      placeholder="选择发布时间"
                      size="small"
                      style="width: 29%; margin-top: 8px;"
                      :disabled="publishType !== 'schedule'"
                  ></el-date-picker>
                </div>
              </div>


            </div>

            <div class="visibility-setting">
              <label class="form-label">可见性设置</label>
              <el-select v-model="post.visibility" placeholder="请选择可见性" size="small" style="width: 100%">
                <el-option label="公开" value="public"></el-option>
                <el-option label="仅粉丝可见" value="fans"></el-option>
                <el-option label="私密" value="private"></el-option>
              </el-select>
            </div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-title">高级设置</div>

          <div class="form-group">
            <el-checkbox v-model="post.allowComment">允许评论</el-checkbox>
            <el-checkbox v-model="post.allowRepost">允许转发</el-checkbox>
            <el-checkbox v-model="post.allowShare">允许分享</el-checkbox>
          </div>
        </div>

        <div class="form-actions">
          <el-button type="default" @click="saveAsDraft">保存草稿</el-button>
          <el-button type="primary" @click="publishPost">发布内容</el-button>
        </div>
      </div>
    </div>


    <!-- 成功提示弹窗 -->
    <el-dialog :visible.sync="successVisible" title="操作成功">
      <div slot="content">
        <div class="text-center">
          <i class="fa-solid fa-check-circle text-success" style="font-size: 48px;"></i>
          <p class="mt-3">{{ successMessage }}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="successVisible = false; handleSuccessRedirect()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CreateView",
    layout: "admin",
  data() {
    return {
      activeMenu: 'content-create',
      post: {
        title: '',
        description: '',
        content: '',
        coverImages: [],
        category: '',
        tags: [],
        publishTime: '',
        visibility: 'public',
        allowComment: true,
        allowRepost: true,
        allowShare: true
      },
      categories: [
        {id: 'fashion', name: '时尚穿搭'},
        {id: 'beauty', name: '美妆个护'},
        {id: 'food', name: '美食探店'},
        {id: 'travel', name: '旅行攻略'},
        {id: 'lifestyle', name: '生活方式'},
        {id: 'fitness', name: '健身运动'},
        {id: 'entertainment', name: '影视娱乐'},
        {id: 'education', name: '学习教育'},
        {id: 'tech', name: '科技数码'},
        {id: 'other', name: '其他分类'}
      ],
      tagInput: '',
      publishType: 'now',
      successVisible: false,
      successMessage: '',
      redirectTo: 'content-list'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleImageUpload() {
      // 创建一个隐藏的文件输入元素
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = 'image/*';
      fileInput.multiple = true;

      // 监听文件选择事件
      fileInput.addEventListener('change', (e) => {
        const files = e.target.files;
        if (files.length > 0) {
          this.uploadImages(files);
        }
      });

      // 触发文件选择对话框
      fileInput.click();
    },
    uploadImages(files) {
      // 模拟图片上传
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();

        reader.onload = (e) => {
          // 限制最多上传9张图片
          if (this.post.coverImages.length < 9) {
            this.post.coverImages.push(e.target.result);
          } else {
            this.$message.warning('最多只能上传9张图片');
          }
        };

        reader.readAsDataURL(file);
      }
    },
    removeCoverImage(index) {
      this.post.coverImages.splice(index, 1);
    },
    addTag() {
      if (this.tagInput.trim() === '') {
        this.$message.warning('标签不能为空');
        return;
      }

      // 检查标签是否已存在
      if (this.post.tags.includes(this.tagInput.trim())) {
        this.$message.warning('标签已存在');
        return;
      }

      // 添加标签
      this.post.tags.push(this.tagInput.trim());
      this.tagInput = '';
    },
    removeTag(index) {
      this.post.tags.splice(index, 1);
    },
    validateForm() {
      // 验证表单
      if (!this.post.title) {
        this.$message.warning('请输入标题');
        return false;
      }

      if (!this.post.content) {
        this.$message.warning('请输入正文内容');
        return false;
      }

      if (this.post.coverImages.length === 0) {
        this.$message.warning('请上传封面图片');
        return false;
      }

      if (!this.post.category) {
        this.$message.warning('请选择内容分类');
        return false;
      }

      if (this.post.tags.length === 0) {
        this.$message.warning('请至少添加一个标签');
        return false;
      }

      if (this.publishType === 'schedule' && !this.post.publishTime) {
        this.$message.warning('请选择定时发布时间');
        return false;
      }

      return true;
    },
    publishPost() {
      // 验证表单
      if (!this.validateForm()) {
        return;
      }

      // 模拟发布请求
      this.$message.loading({
        message: '正在发布内容...',
        duration: 0
      });

      // 模拟API请求延迟
      setTimeout(() => {
        this.$message.close();

        this.successMessage = '内容发布成功';
        this.successVisible = true;

        // 重置表单
        this.resetForm();
      }, 1500);
    },
    saveAsDraft() {
      // 验证表单
      if (!this.post.title && !this.post.content) {
        this.$message.warning('标题和正文内容不能同时为空');
        return;
      }

      // 模拟保存草稿请求
      this.$message.loading({
        message: '正在保存草稿...',
        duration: 0
      });

      // 模拟API请求延迟
      setTimeout(() => {
        this.$message.close();

        this.successMessage = '草稿保存成功';
        this.successVisible = true;
        this.redirectTo = 'publish-drafts';
      }, 1000);
    },
    resetForm() {
      this.post = {
        title: '',
        description: '',
        content: '',
        coverImages: [],
        category: '',
        tags: [],
        publishTime: '',
        visibility: 'public',
        allowComment: true,
        allowRepost: true,
        allowShare: true
      };
      this.publishType = 'now';
    },
    handleSuccessRedirect() {
      // 在实际应用中，这里可以跳转到相应的页面
      console.log(`Redirect to: ${this.redirectTo}`);
    }
  }
};
</script>

<style scoped lang="scss">
/* 内容发布表单 */
.content-form {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBEEF5;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #EBEEF5;
  outline: none;
}

.form-input:focus {
  border-color: var(--primary-color);
}

.form-textarea {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #EBEEF5;
  outline: none;
  resize: vertical;
  min-height: 100px;
}

.form-textarea:focus {
  border-color: var(--primary-color);
}

/* 图片上传区域 */
.image-upload {
  border: 2px dashed #EBEEF5;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.image-upload:hover {
  border-color: var(--primary-color);
}

.upload-icon {
  font-size: 36px;
  color: var(--gray-color);
  margin-bottom: 10px;
}

.upload-text {
  color: var(--gray-color);
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.preview-item {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 分类和标签 */
.category-tags {
  display: flex;
  gap: 20px;
}

.category-select,
.tag-input {
  flex: 1;
}

/* 发布设置 */
.publish-settings {
  display: flex;
  gap: 20px;
}

.publish-time,
.visibility-setting {
  flex: 1;
}
.publish-time-publish{
}
/* 表单底部按钮 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
</style>
